<template>
  <div id="account_login">
    <el-form ref="accountLoginForm"
             :model="account"
             :rules="rules"
             label-width="50px">
      <el-form-item label="账号"
                    prop="username">
        <el-input v-model="account.username"
                  placeholder="admin"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="password">
        <el-input v-model="account.password"
                  placeholder="1234567"
                  type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="100">
          <el-col :span="4">
            <el-button type="primary"
                       @click="submitForm(ruleFormRef)">登录</el-button>
          </el-col>
          <el-col :span="4"
                  :push="4">
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="6"
              :push="18">
        <el-link type="info"
                 :underline="false"
                 @click="openRegisterDia">注册新用户</el-link>
      </el-col>
    </el-row>
  </div>
  <!-- 注册新用户的弹窗 -->
  <el-dialog v-model="dialogFormVisible"
             width="40%"
             title="注册新用户">
    <el-form :model="form"
             :rules="rules">
      <el-form-item label="账号"
                    prop="username"
                    :label-width="60">
        <el-input v-model="form.username"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="password"
                    :label-width="60">
        <el-input v-model="form.password"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="昵称"
                    :label-width="60">
        <el-input v-model="form.nickname"
                  disabled
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱"
                    :label-width="60">
        <el-input v-model="form.email"
                  disabled
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="头像"
                    disabled
                    :label-width="60">
        <el-input v-model="form.user_pic"
                  disabled
                  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="registerUser">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, reguser } from '@/api/login'
export default defineComponent({
  name: 'accountLogin',
  setup() {
    const rules = reactive({
      username: [{
        required: true,
        message: '请输入账号！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在3到10之间',
        trigger: 'blur',
      },],
      password: [{
        required: true,
        message: '请输入密码！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在3到10之间',
        trigger: 'blur',
      },]
    })
    const accountLoginForm = ref(null)
    const account = reactive({
      username: 'admin',
      password: '1234567'
    })
    // 登录操作
    const router = useRouter()
    const submitForm = () => {
      // ref.value.validate 表单检验传回一个回调 true false
      accountLoginForm.value.validate(valid => {
        if (valid) {
          console.log('ok');
          console.log(login);
          try {
            login(account).then(res => {
              if (res.status !== '0') return ElMessage({
                message: res.message,
                type: 'error',
              })
              // 获取到的token存到 localstorage
              localStorage.setItem('token', res.token)
              router.push('/main')
            })
          } catch (err) {
            console.log(err);
          }

        } else {
          ElNotification({
            title: '错误',
            message: '请检查你的账号密码是否输入正确！',
            type: 'error'
          })
        }
      })
    }
    // 重置按钮
    const resetForm = () => {
      // ref.value.resetFields() 重置表单
      accountLoginForm.value.resetFields()
    }
    // 注册新用户
    const dialogFormVisible = ref(false)
    const form = reactive({
      username: 'tang',
      password: 'tang123',
      nickname: '',
      email: '',
      user_pic: ''
    })
    const openRegisterDia = () => {
      dialogFormVisible.value = true
    }
    // 点击dia的确定注册
    const registerUser = () => {
      console.log(form);
      reguser(form).then(res => {
        if (res.status !== '0') return ElMessage({
          message: res.message,
          type: 'error',
        })
        console.log(res);
      })
      // dialogFormVisible.value = false
    }
    return {
      account,
      rules,
      submitForm,
      resetForm,
      accountLoginForm,
      dialogFormVisible,
      form,
      openRegisterDia,
      registerUser
    }
  }
})
</script>

<style scoped lang="less">
#account_login {
  .el-form {
    .el-form-item {
      padding: 0 30px;
    }
  }
}
</style>
